<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>Stock</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <link rel="stylesheet" type="text/css"  href="index.css" />
    <!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app" style="margin:0 ;line-height: normal ;padding:0; margin-top: -1px;position: relative;" align="center">
    <template>
            <div style="width: 80%;">
                        <div align="center">
                            <i-button :type="todayProfit>0?'error':'success'">今日盈亏: {{todayProfit}} 元 <Icon :type="todayProfit>0?'md-arrow-up':'md-arrow-down'" /></i-button>
                            <i-button :type="totalProfit>0?'error':'success'">总盈亏: {{totalProfit}} 元 <Icon :type="totalProfit>0?'md-arrow-up':'md-arrow-down'" /></i-button>
                        </div>
                        <i-table border  :columns="tableColumns" :data="tableData"></i-table>
             </div>
    </template>
</div>

<div class="floor-module">
    <p>Copyright © 2018, Inc. Farahani 版权所有</p>
</div>

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="http://hq.sinajs.cn/list=sz000639,sh600256,sh600986,sh603056"></script>
<script>



   var V =  new Vue({
        el: '#app',
        data: {
            tableColumns: [
                {
                    title: '股票名称',
                    key: 'name'
                },
                {
                    title: '成本/现价',
                    render: (h, params) => {
                        var flag = params.row.last_price>params.row.cost_price;
                        return h('div',[params.row.cost_price,'/ ',h('font',{
                            style:{
                               color:flag?'#ed4014':'#19be6b'
                            },
                          },params.row.last_price),h("Icon",{
                                props:{
                                    type:flag?'ios-arrow-round-up':'ios-arrow-round-down',
                                }
                            }
                        )])
                    }
                },
                {
                    title: '涨额/涨幅',
                    render: (h, params) => {
                        var rise_fall_per = params.row.rise_fall/params.row.yesy_price*100;
                        var flag = rise_fall_per>0;
                        var fontColor = flag?'#ed4014':'#19be6b';
                        var iconType = flag?'ios-arrow-round-up':'ios-arrow-round-down';
                        return h('div',[
                            h('font',{style:{color:fontColor}},params.row.rise_fall),
                            h('Icon',{props:{type:iconType}}),
                            ' / ',
                            h('font',{style:{color:fontColor}},rise_fall_per.toFixed(3)+'%'),
                            h('Icon',{props:{type:iconType}}),
                        ])
                    }
                },
                {
                    title: '持仓',
                    key: 'position',
                    sortable: true
                },
                {
                    title: '今天/历史(盈亏)',
               /*     render: (h, params) => {
                        return h('div',`${params.row.profit} / ${params.row.totalProfit}`);
                    }*/
                    render: (h, params) => {
                        var profit = params.row.profit;
                        var totalProfit =  params.row.totalProfit;
                        var profitIconType = profit>0?'ios-arrow-round-up':'ios-arrow-round-down';
                        var totalProfitIconType = totalProfit>0?'ios-arrow-round-up':'ios-arrow-round-down';
                        return h('div',[
                            h('font',{style:{color:profit>0?'#ed4014':'#19be6b'}},profit),
                            h('Icon',{props:{type:profitIconType}}),
                            ' / ',
                            h('font',{style:{color:totalProfit>0?'#ed4014':'#19be6b'}},totalProfit),
                            h('Icon',{props:{type:totalProfitIconType}}),
                        ])
                    }
                },
            ],
            tableData:[
               /* {
                    name:'',
                    open_price:0,//开盘价
                    last_price:0,//当前价
                    rise_fall:0,//涨跌额
                    rise_fall_per:0,//涨跌幅
                    position:0,//持仓
                    profit:0,//盈利
                },*/
            ],
            stocks:[],
            todayProfit:0.00,
            totalProfit:0.00,
            cacheTodayDataProfit:0.00,
        },
        methods: {
            _notify(){
                var self = this;
                debugger
                    if(window.Notification.permission=="granted"){

                        var options = {
                            body:`今天${self.todayProfit>0?'赚':'亏'}了${self.todayProfit}元啦`,
                            icon:"pupuzhu.jpg",
                            dir:"auto",
                            tag:"SoMany",
                           //sound:'http://localhost:63342/SVG/2.mp3',
                            silent:false
                        };
                        var notice = new Notification("噗噗猪",options);

                      //  notice.close()
                   } else {
                        //询问是否允许通知
                        Notification.requestPermission();
                    }

            },
            request(){

                var self = this;

                self.todayProfit = 0;
                self.totalProfit = 0;


                self.tableData = [];

                var stocksStr = "";
                stocks.forEach(s=>stocksStr=stocksStr+s.code+",")


                dynamicLoading.js(`http://hq.sinajs.cn/list=${stocksStr}`);

                stocks.forEach(s=>{
                    var temp = eval(`hq_str_${s.code}`)
                    var stockStr =  temp.split(",");
                    var stock = s;
                    stock.yesy_price = stockStr[2];
                    stock.last_price = stockStr[3];
                    stock.rise_fall = (stock.last_price-stock.yesy_price).toFixed(3);
                    stock.profit =  (stock.position*stock.rise_fall).toFixed(3);
                    stock.totalProfit = ((stock.last_price - stock.cost_price)*stock.position).toFixed(3);

                    self.todayProfit = self.todayProfit+parseFloat(stock.profit);
                    self.totalProfit = self.totalProfit+parseFloat(stock.totalProfit);

                  /*  for (let i = 0; i < self.tableData.length ; i++) {
                        var lastData = self.tableData[i]
                        if (lastData.code == stock.code){
                            stock.last_data = {
                                last_price:lastData.last_price,
                            }
                        }
                    }*/

                    self.tableData.push(stock);

                });
                if (Math.abs(self.cacheTodayDataProfit - self.todayProfit)>=2) {
                    self._notify()
                }
                self.cacheTodayDataProfit = self.todayProfit

            }

        },
       mounted(){
           this.request()
           setInterval(i=>this.request(),2000)


       }
    })
</script>
</body>
</html>
